<template>
    <div class="container" ref="resizeDiv">
        <div class="content" ref="imgDiv">
            <!-- <div class="ground-arrow">
                <div class="ground-arrow-item" v-for="(it, index) in lightGroupObj" :key="index">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2.07567 4.19247" :class="it.leftColor">
                        <path fill=""
                            d="M2.07185 4.18865l-0.58363 -0.00105 0.00266 -3.18614 -0.50114 0.00235c0.10596,0.14434 0.39473,0.44559 0.37828,0.4478 -0.22013,0.00385 -0.43945,-0.00312 -0.65286,-0.00312l-0.70973 -0.69777 0.75478 -0.74688 0.63559 0.01133 -0.40077 0.42189 0.76359 0.00305c0.18397,-0.00077 0.30382,0.0696 0.3046,0.37276l0.00863 3.37578z" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1.70228 4.19461" :class="it.centerColor">
                        <polygon
                            points="1.17194,4.18548 0.5646,4.19077 0.57519,1.15624 0.01179,1.66455 0.00383,0.90106 0.84157,0.00557 1.69847,0.92046 1.6966,1.71912 1.15605,1.16623 " />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2.07567 4.19247" :class="it.rightColor">
                        <path
                            d="M2.07185 4.18865l-0.58363 -0.00105 0.00266 -3.18614 -0.50114 0.00235c0.10596,0.14434 0.39473,0.44559 0.37828,0.4478 -0.22013,0.00385 -0.43945,-0.00312 -0.65286,-0.00312l-0.70973 -0.69777 0.75478 -0.74688 0.63559 0.01133 -0.40077 0.42189 0.76359 0.00305c0.18397,-0.00077 0.30382,0.0696 0.3046,0.37276l0.00863 3.37578z" />
                    </svg>
                </div>
            </div> -->
            <div class="signal-light">
                <div class="signal-light-item" v-for="(it, index) in lightGroupObj!.lightGroup" :key="index">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6.20848 6.6025" :class="setLightColor(it.zuo)"
                        @click="it.zuo = changeLightColor(it.zuo)">
                        <ellipse cx="3.10424" cy="3.30125" rx="3.09424" ry="3.29125" />
                        <path fill="#ccc"
                            d="M0.87842 4.42771l2.22913 -2.22084 2.2225 2.21589 0 -1.34277 -2.22912 -2.2225 -2.2225 2.22912 0 1.30969 -1e-005 0.03141zm1.7615 1.31731l0.91282 0 0 -2.67892 -0.91282 0 0 2.67892z" />

                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6.20848 6.6025" :class="setLightColor(it.zhi)"
                        @click="it.zhi = changeLightColor(it.zhi)">
                        <ellipse cx="3.10424" cy="3.30125" rx="3.09424" ry="3.29125" />
                        <path fill="#ccc"
                            d="M0.87842 4.42771l2.22913 -2.22084 2.2225 2.21589 0 -1.34277 -2.22912 -2.2225 -2.2225 2.22912 0 1.30969 -1e-005 0.03141zm1.7615 1.31731l0.91282 0 0 -2.67892 -0.91282 0 0 2.67892z" />

                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6.20848 6.6025" :class="setLightColor(it.you)"
                        @click="it.you = changeLightColor(it.you)">
                        <ellipse cx="3.10424" cy="3.30125" rx="3.09424" ry="3.29125" />
                        <path fill="#ccc"
                            d="M0.87842 4.42771l2.22913 -2.22084 2.2225 2.21589 0 -1.34277 -2.22912 -2.2225 -2.2225 2.22912 0 1.30969 -1e-005 0.03141zm1.7615 1.31731l0.91282 0 0 -2.67892 -0.91282 0 0 2.67892z" />

                    </svg>
                </div>
            </div>
            <div class="crosswalk-light">
                <FlowPipeline :boxWidth="190" :color="setLightColor(it.renxing)" :directionRotate="[90, 180, 270, 0][index]"
                    class="crosswalk-light-item" v-for="(it, index) in lightGroupObj!.lightGroup " :key="index"
                    @click="it.renxing = changeLightColor(it.renxing)" />
            </div>
            <div class="count-down">
                <el-text type="warning">{{ lightGroupObj!.time < 10 ? '0' + lightGroupObj!.time : lightGroupObj!.time
                        }}</el-text>
                        <el-text type="warning">{{ lightGroupObj!.phaseTime == 0 ? '相位时间' : lightGroupObj!.phaseTime ==
                            1 ? '绿闪时间' : '黄灯时间' }}</el-text>
            </div>
        </div>

    </div>
</template>
<script lang="ts" setup>

    import { ref, onBeforeUnmount, onMounted} from 'vue'
    import FlowPipeline from './FlowPipeline.vue'
    //import { IlightGroup } from '@renderer/interface'
    const { lightGroupObj } = defineProps({
        'lightGroupObj': {
            type: Object, default: {
                time: 0,
                phaseTime: 0,
                light: []
            }
        }
    })
    //const emit = defineEmits(['updateParent'])
    const scaleSize = ref(1)
    const imgDiv = ref<Element | undefined>()
    const resizeDiv = ref<Element | undefined>()


    function setLightColor(status:number){
        if(status===1){
            return 'red'
        }else if(status === 2){
            return  'yellow'
        }else if(status ===4){
            return 'green'
        }else return 'dimgray'
    }
    function changeLightColor(status:number) {
        if(++status >= 5)
            status = 0
        if(status === 1){
            return 1
        }else if(status === 4 || status === 2 || status ===3){
            return 4
        }else return 0
    }
  
    const updateSize = (_) => {
        if (resizeDiv.value!.getBoundingClientRect().height / 669 * 800 >= resizeDiv.value!.getBoundingClientRect().width) {
            if (resizeDiv.value!.getBoundingClientRect().height / 669 >= scaleSize.value)
                return
        }
        scaleSize.value = resizeDiv.value!.getBoundingClientRect().height / 669
        console.log(scaleSize.value)
    };

    const resizeObserver = new ResizeObserver(updateSize);

    /* watchEffect(() => {
        console.log(lightGroupObj)
        //emit('updateParent', lightGroupObj)
    })
 */
    onBeforeUnmount(() => {
        resizeObserver.disconnect();
    });

    onMounted(() => {
        if (resizeDiv.value) {
            resizeObserver.observe(resizeDiv.value)
        }
        /* lightGroupObj.light=[]
        for (let i = 0; i < 4; i++) {
            lightGroupObj.light.push({ leftColor: 'black-out', centerColor: 'black-out', rightColor: 'black-out', renxingColor: '#666' })
        } */
    })
</script>

<style lang="scss" scoped>
    .container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: calc(100vh - 150px);

        .content {
            width: 800px;
            height: 669px;
            background-image: url('../assets/gk.png');
            background-size: contain;
            transform: scale(v-bind(scaleSize));

            .ground-arrow {
                position: relative;

                .ground-arrow-item {
                    width: 90px;
                    position: absolute;
                    top: 503px;
                    left: 404px;
                    display: flex;
                    justify-content: space-between;

                    svg {
                        width: 25px;
                    }

                    svg:nth-child(2) {
                        width: 22px;

                    }

                    svg:nth-child(3) {
                        transform: rotateY(180deg);
                    }
                }

                .ground-arrow-item:nth-child(1) {
                    transform: translate(153px, -243px) rotate(270deg);
                }

                .ground-arrow-item:nth-child(3) {
                    transform: translate(-245px, -148px) rotate(90deg);
                }

                .ground-arrow-item:nth-child(4) {
                    transform: translate(-97px, -398px) rotate(180deg);
                }
            }

            .signal-light {
                cursor: pointer;
                position: relative;

                .signal-light-item {
                    position: absolute;
                    width: 27px;
                    top: 336px;
                    left: 570px;

                    svg:nth-child(2) {
                        transform: rotate(90deg);
                    }

                    svg:nth-child(3) {
                        transform: rotate(180deg);
                    }
                }

                .signal-light-item:nth-child(2) {
                    transform: rotate(90deg) translate(133px, 234px);
                }

                .signal-light-item:nth-child(3) {
                    transform: rotate(180deg) translate(365px, 101px);
                }

                .signal-light-item:nth-child(4) {
                    transform: rotate(270deg) translate(238px, -134px);
                }
            }

            .crosswalk-light {
                position: relative;
                cursor: pointer;

                .crosswalk-light-item {
                    position: absolute;
                    top: 319px;
                    left: 431px;
                    height: 28px;
                }

                .crosswalk-light-item:nth-child(2) {
                    top: 448px;
                    left: 303px;
                }

                .crosswalk-light-item:nth-child(3) {
                    top: 320px;
                    left: 175px;
                }

                .crosswalk-light-item:nth-child(4) {
                    top: 191px;
                    left: 303px;
                }
            }

            .count-down {
                position: absolute;
                display: flex;
                flex-direction: column-reverse;

                .el-text:nth-child(1) {
                    font-size: 55px;
                }

                .el-text:nth-child(2) {
                    font-size: 20px;
                }

                top:284px;
                left: 361px;
            }
        }
    }

    .red {
        fill: rgb(253, 0, 0);
    }

    .black-out {
        fill: #666;
        color: #ccc;
    }

    .green {
        fill: green;
    }

    .dimgray {
        fill: dimgray;
    }

    .yellow {
        fill: rgb(230, 162, 60);
    }
</style>